<template>
	<A></A>
	{{ num }}-{{ name }}-{{ age }} |||||| {{ nicknum }}={{ nickname }}={{ nickage }} {{ shopList }}
	<button @click="changeName">修改名称</button>
	{{ changeNum }} {{ changeNum }} {{ changeNum }}
	<button @click="btn">+=操作</button>
	<button @click="reset">重置</button>
</template>

<script setup>
// 导入不同模块:
import { counterStore } from '../stores/pinia_counter.ts';
import { userStore } from '../stores/pinia_user.ts';
import { shopStore } from '../stores/pinia_shop.ts';

import { storeToRefs } from 'pinia'; //响应式
import A from '@/components/Pinia_A.vue';

const counter = counterStore(); //实例化模块
const user = userStore(); //实例化模块
const shop = shopStore(); //实例化模块

// 解构出数据:
let { name, num, age, changeNum } = storeToRefs(counter); //用了storeToRefs才能变成响应式数据
let { nickname, nicknum, nickage, changeAge } = storeToRefs(user); //用了storeToRefs才能变成响应式数据
let { shopList } = storeToRefs(shop); //用了storeToRefs才能变成响应式数据

const changeName = () => {
	// 更改方法1:
	// name.value = '李四';
	// num.value = 10;

	// 更改方法2:
	// 批量更新
	counter.$patch(state => {
		state.name = '王五';
		state.num++;
	});
};

const btn = () => {
	counter.upNum(200);
};

const reset = () => {
	counter.$reset();
};
</script>

<style></style>
